<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>🍎🍌🍊11</title>
	<style>
		body {
			padding: 0;
			margin: 0;
		}

		#app>div>div {
			border: thin solid black;
			float: left;
			box-sizing: border-box;
			font-size: large;
			text-align: center;
		}

		#app>div>div:empty {
			background-color: grey;
		}
	</style>
</head>

<body>
	<a href="/wechat/mock_login.html">微信登录</a>

	<div>数字华容道</div>
	<div id="app">
		<button @click="rand">随机生成</button>
		<input type="number" v-model="x" style="width: 10px;" @keyup.up="x=x+1" @keyup.down="x=x-1">
		<input @keyup.up="move(z-x)" @keyup.down="move(z+x)" @keyup.left="move(z-1)" @keyup.right="move(z+1)">
		<div>
			<div v-for="(i,idx) in a" :key="i" v-text="i" @click="move(idx)" :style="style"></div>
		</div>
	</div>
	<div id="qrcode"></div>

	<script src="/scriptZIP/vue.global.prod.min.js"></script>

	<script>

		Vue.createApp({
			data: function () {
				return {
					x: 3,
					z: 0,
					a: [],
				}
			},
			created: function () {
				this.init();
			},
			methods: {
				init: function () {
					this.a = this.a0();
					this.z = 0;
				},
				a0: function () {
					var a = [];
					for (var i = 0; i < this.xx; i++) a.push(i);
					a[0] = undefined;
					return a;
				},
				move: function (i) {
					if (i >= 0 && i < this.xx && this.z in this.map[i]) {
						this.move0(i);
						if (this.success) alert('完成！');
					}
				},
				move0: function (i) {
					this.a[this.z] = this.a[i];
					this.a[i] = undefined;
					this.z = i;
				},
				rand: function () {
					var _this = this;
					var i = 10 * this.xx;
					var run = function () {
						if (i-- < 0) return;
						var t = Object.keys(_this.map[_this.z]);
						t = t[parseInt(Math.random() * t.length)];
						setTimeout(function () {
							_this.move0(t);
							run();
						}, 17);
					};
					run();
				}
			},
			computed: {
				xx: function () {
					return this.x * this.x;
				},
				map: function () {
					var x = this.x, xx = this.xx, a = [], o, i;
					for (i = 0; i < xx; i++) {
						o = {};
						if (i >= x) o[i - x] = 1;
						if (i % x) o[i - 1] = 1;
						if ((i + 1) % x) o[i + 1] = 1;
						if (i < xx - x) o[i + x] = 1;
						a.push(o);
					}
					return a;
				},
				style: function () {
					var a = parseInt(100 / this.x);
					return {
						width: a + 'vw',
						height: a + 'vw',
						'line-height': a + 'vw'
					};
				},
				success: function () {
					var m = this.xx - 1;
					for (var i = 0; i < m; i++)
						if (this.a[i] != i + 1)
							return false;
					return true;
				}
			},
			watch: {
				x: function (to, from) {
					if (to < 1) {
						this.x = 3;
						return;
					}
					this.init();
				}
			}
		}).mount('#app');
	</script>

</body>

</html>